<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        body{

            background: #ffffff;
        }
        .main{
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
        }
        .more:hover{
            color: #1772fa;
        }
        /*.header{*/
            /*height: calc(100% * 0.25px);*/
            /*width: 100%;*/
        /*}*/
        .bodyer{
            /*overflow: hidden;*/
            /*height: calc(100% - 200px);*/
            background: url("../image/bg2.jpg")no-repeat;
            background-size: contain;
        }
        .header_t{
            border-bottom: 1px solid #3e93ff;
            background: #146ffb;
            /*background: red;*/
            height: 40px;
        }
        .header_b{
            height: 220px;
            width: 100%;
            background: url("../image/bg1.png")no-repeat;
            background-size: cover;
            background-position: center bottom;

        }
        .header_b>div{
            width: 65%;
            height: 100%;
            position: relative;
        }
        .header_b .news{
            display: none;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(25,102,203,0.9);
            height: 40px;
        }
        .header_b .news>div{
            padding-left: 10px;
            flex : 1;
        }
        .header_b .news>div>p{
            cursor: pointer;
            width: calc(100% - 40px);
            color: #ffffff;
            text-indent: 50px;
            justify-content: flex-start;
            font-size: 12px;
        }
        .notice_icon{
            width: 20px;
            height: 20px;
            background: url("../image/notice.png");
            background-size: cover;
        }
        /*.header_b .news>div:nth-of-type(2)>p{*/
            /*border-left: 1px solid #ffffff;*/
        /*}*/
        p{
            margin:  0 ;
        }
        body .header_t_c{
            width: 65%;
            height: 100%;
            justify-content: space-between;
            color: #ffffff;
        }
        .header_t_c>div{
            height: 100%;
        }
        .header_t_c ul {
            height: 100%;
        }
        .header_t_c ul li{
            height: 100%;
            padding: 0px 15px;
            box-sizing: border-box;
        }
        .header_t_c ul li span{
           display: flex;
            height: 100%;
            cursor: pointer;
        }
        body .header_t_c ul .ul_active{
            border-bottom: 2px solid #ffffff;
            box-sizing: border-box;
        }
        .search_box{
            width: 100%;
            height: 100%;
        }
        .search_box_t{
            justify-content: space-between;
        }
        .search_box_b{
            justify-content: flex-start;
            /*background: -webkit-linear-gradient(top, rgba(25,102,203,0.7) 70%,rgba(255,255,255,0.7) 100%);*/
            /*background: -webkit-linear-gradient(top, rgba(25,102,203,0.7) 70%,rgba(255,255,255,0.7) 100%);*/
        }
        .search_box_b>ul{
            width: calc(100% - 20px);
            overflow: hidden;
            white-space:nowrap;
            justify-content: flex-start;
        }
        .header_b_main{
            width: 100%;
        }
        .select{
            cursor:pointer;
            font-size: 12px;
            color: #666666;
            justify-content: center;
            width: 60px;
            border-top-left-radius: 3px;
            border-bottom-left-radius: 3px;
        }
        input{
            border: none;
            color: #666666;
            outline: none;
            font-size: 12px;
            border-left: 1px solid #e1e1e1;
            text-indent: 20px;
            width: 100%;
        }
        .input_box{
            width: calc(100% - 100px);
        }
        .search_box_t_main{
            justify-content: flex-start;
            width: calc(100% - 130px);
        }
        .search_box_t_main>div{
            height: 40px;
            background: #ffffff;
        }
        .senior{
            font-size: 12px;
            cursor: pointer;
            width: 100px;
            height: 40px;
            justify-content:center ;
            background: rgba(25,102,203,0.9);
            color: #fff;
        }
        .icon_1_box{
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
            justify-content: center;
            cursor: pointer;
            width: 40px;
            height: 40px;
        }
        .icon_1{
            width: 20px;
            height: 20px;
            background: url("../image/icon_1.png")no-repeat center center;
            background-size: cover;
        }
        .icon_2{
            margin-left: 5px;
            width: 6px;
            height: 4px;
            background: url("../image/icon_2.png")no-repeat center center;
            background-size: cover;
        }
        .icon_3{
            margin-left: 10px;
            width: 7px;
            height: 9px;
            background: url("../image/icon_3.png")no-repeat center center;
            background-size: cover;
        }
        .vis_select{
            width: 30px;
            visibility: hidden;
        }
        input[type=checkbox]{
            margin: 0;
        }
        .search_box_b li{
            /*background-image: radial-gradient(rgba(25,102,203,0.9), rgba(255,255,255,0.9));*/
            /*border-radius: 50%;*/
            margin-left: 15px;
            height: 40px;
            color: #ffffff;
        }
        .search_box_b li span{
            margin-left: 2px;
            font-size: 12px;
            /*font-weight: bold;*/
        }
        li>input{
            margin: 0;
            width: 14px;
            height: 14px;
            outline: none;
            border: none;
        }
        .bodyer>ul{
            /*padding-top: 40px;*/
            align-items: flex-start;
            padding-bottom: 50px;
            height: 100%;
            /*overflow-y: auto;*/
            width: 65%;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .bodyer>ul>li{
            margin-top: 20px;
            box-shadow: 2px 2px 2px #c7c7c7;
            padding: 10px;
            width: 47%;
            background: #fff;
        }
        .bodyer>ul>li .icon_4{
            display: inline-block;
            width: 14px;
            height: 14px;
            /*background: url("../image/icon_4.png")no-repeat center center;*/
            /*background-size: cover;*/
        }
        .bodyer>ul>li span{
            /*font-weight: bold;*/
            margin-left: 5px;
        }
        .title_box .title span{
            font-weight: bold;
        }
        .title_box{
            justify-content: space-between;
            border-bottom: 1px solid #eaeaea;
            line-height: 24px;
        }
        .title{
            border-bottom: 2px solid #333333;
            font-size: 14px;
            color:#333333;
            justify-content: flex-start;
        }
        .more{
            cursor: pointer;
            color: #a4a4a5;
            font-size: 12px;
        }
        .icon_5{
            display: inline-block;
            border: 2px solid #999999;
            margin-left: 10px;
        }
        .content_li{
            cursor: pointer;
            white-space:nowrap;
            overflow: hidden;
            border-top: 1px dashed #eaeaea;
            height: 40px;
            justify-content: flex-start;
        }
        body .bodyer .content_li span{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            display: inline-block;
            width: calc(100% - 14px);
            margin-left: 10px;
            font-size: 14px;
            color: #616261;
        }
        .content_li_box{
            max-height: 200px;
            overflow: hidden;
        }
        .photo{
            width: 30px;
            height: 30px;
            background: url("../image/head.png");
            background-size: cover;
            border-radius: 50%;
        }
        .name{
            padding: 0px 10px;
        }
        .quit_btn{
            color: #72afff;
            font-style: normal;
            font-size: 12px;
            height: 100%;
            cursor: pointer;
        }


        input::-webkit-input-placeholder {
            /* WebKit browsers */
            color: #949699;
        }
        input:-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            color: #949699;
        }
        input::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: #949699;
        }
        input:-ms-input-placeholder {
            /* Internet Explorer 10+ */
            color: #949699;
        }


    </style>
</head>
<body>
<div class="main">
    <div class="header">
        <div class="header_t flex">
            <div class="header_t_c flex">
                <div class="flex">军用标准化动态信息</div>
                <div>
                    <ul class="flex">
                        <li class="flex"><span class="ul_active flex home_page">首页</span></li>
                        <li class="flex"><span class="flex knowledge_page">知识库</span></li>
                        <li class="flex"><span class="flex">系统管理</span></li>
                        <!--<li class="flex"><span class="flex">登陆</span></li>-->
                        <li class="flex">
                            <i class="photo"></i><span class="flex name my_page"></span><i class="quit_btn flex">退出</i>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="header_b flex">
            <div class="flex">
                <div class="header_b_main flex">
                    <div class="search_box">
                        <div class="search_box_t flex">
                            <div class="flex search_box_t_main">
                                <div class="select_box flex">
                                    <p type="keyword" id="search_type">主题</p>
                                    <i class="search_i_3"></i>
                                    <div class="select_content">

                                    </div>
                                </div>
                                <div class="flex input_box">
                                    <input class="serch_inp" placeholder="请搜索要搜索的内容" type="text">
                                </div>
                                <div class="icon_1_box flex">
                                    <i class="icon_1"></i>
                                </div>
                            </div>
                            <div class="senior flex">高级检索<i class="icon_3"></i></div>
                        </div>
                        <div class="search_box_b flex">
                            <div class="vis_select"></div>
                            <ul id="vis_select_ul" class="flex">

                            </ul>
                        </div>
                    </div>
                </div>
                <div class="news flex">
                    <div class="flex"><div class="notice_icon"></div><p class="flex news_box1 notice_text"></p></div>
                    <div class="flex" style="border-left: 1px solid #ffffff"><div class="notice_icon"></div><p class="flex news_box2 notice_text"></p></div>
                </div>
            </div>
        </div>
    </div>
    <div class="bodyer flex">
        <ul class="flex">

        </ul>
    </div>
</div>
<script id="item_list_tem" type="text/x-dot-template">
    {{~it:value:index}}
    <li>
        <div>
            <div class="title_box flex">
                <div class="title flex">
                    <i class="icon_4" style="background: url(../image/icon_4.png)no-repeat center center;background-size: cover"></i><span>{{=value.field}}</span>
                </div>
                <div class="more" type="{{=value.field}}">MORE</div>
            </div>
            <div class="content_li_box">
                {{~value.list:value2:index2}}
                    <div class="flex content_li"><icon class="icon_5"></icon><span class="text_item" id_="{{=value2.id}}" title="{{=value2.title}}">{{=value2.title}}</span></div>
                {{~}}
            </div>
        </div>
    </li>
    {{~}}
</script>
<script id="item_list_tem2" type="text/x-dot-template">
    {{~it:value:index}}
    <li class="flex"><input class="search_check" type="checkbox" att="{{=value.id}}"><span>{{=value.name}}</span></li>
    {{~}}
</script>

<script id="item_list_tem3" type="text/x-dot-template">
    {{~it:value:index}}
    <div type="{{=value.searchKey}}" class="select_content_item">{{=value.searchLabel}}</div>
    {{~}}
</script>

<script src="../js/jquery.min.js"></script>
<script src="../js/url.js"></script>
<script src="../js/doT.min.js"></script>
<script src="../js/common.js"></script>
<script>
var arr1 = [],arr2 = [],check_arr = [];
$(function(){
    render_user();
    get_page_data();
    document.onkeydown = function(e) {
        if (e.keyCode == 13) {
            if($('.serch_inp').val()==""){
                s_warning('请输入搜索内容')
                return
            }
            var obj_ = {"searchKey" : $('#search_type').attr("type")}
            $('.serch_inp').val()!=""?obj_.searchValue = $('.serch_inp').val():'';
            check_arr.length>0?obj_.classifyParents = check_arr.join(','):'';
            url_jump('search_result',obj_)
        }
    }

    $('.senior').on('click',function () {
        url_jump('search_result',{"search":"true"})
    })

    $('#search_type,.search_i_3').on('click',function () {
        $(this).parent().find('.select_content').slideToggle();
    })

    $('body').on('click','.select_content_item',function () {
        var type = $(this).attr("type")
        $('#search_type').text($(this).text()).attr({"type":type});
        $('.select_content').slideToggle();
    });

    $('body').on('change','.search_check',function () {
        var id = $(this).attr('att');
        if($(this).is(':checked')){
            check_arr.push(id)
        }else{
            arr_remove(check_arr,id)
        }
    })

    $('.icon_1_box').on('click',function () {
        if($('.serch_inp').val()==""){
            s_warning('请输入搜索内容')
            return
        }
        var obj_ = {"searchKey" : $('#search_type').attr("type")}
        $('.serch_inp').val()!=""?obj_.searchValue = $('.serch_inp').val():'';
        check_arr.length>0?obj_.classifyParents = check_arr.join(','):'';
        url_jump('search_result',obj_)
    });

    $('body').on('click','.text_item',function () {
        var id = $(this).attr('id_');
        url_jump('detail',{"id":id})
    })

    $('body').on('click','.more',function () {
        var type = encodeURI($(this).attr('type'));
        url_jump('knowledge',{"mediaCountry":type})
    })

    $('body').on('click','.notice_text',function(){
        var id = $(this).attr('id_')
        url_jump('notice_detail',{"id":id})
    })
})

    function get_page_data() {
        var option = option_structure([
            {
                "method" : "get",
                "url" : ajax_url.searchTypes
            },
            {
                "method" : "get",
                "url" : ajax_url.docClassfiyDatas
            },
            {
                "method" : "get",
                "url" : ajax_url.noticeList
            },
            {
                "method":"get",
                "url":ajax_url.classifyTree+'?id=0'
            }
        ]);
        var back = callback_structure([
            function (res) {
                judge_data(res.selectTypes,function (data) {
                    doT_render('.select_content','#item_list_tem3',data);
                })
            },
            function (res) {
                judge_data(res,function (data) {
                    doT_render('.bodyer ul','#item_list_tem',data);
                })
            },
            function (res) {
                judge_data(res,function (data) {
                    $('.news').css({"display":"flex"});
                    for(var i=0;i<data.length;i++){
                        i%2==0?arr1.push(data[i]):arr2.push(data[i])
                    }
                    if(arr1.length>0) {
                        $('.news_box1').text(arr1[arr1.length-1].noticeTitle).attr({'id_':arr1[arr1.length-1].noticeId});
                        news_render('.news_box1',arr1)
                    }
                    if(arr2.length>0) {
                        $('.news_box2').text(arr2[arr2.length-1].noticeTitle).attr({'id_':arr2[arr2.length-1].noticeId});
                        news_render('.news_box2',arr2)
                    }
                })
            },
            function (res) {
                judge_data(res,function (data) {
                    doT_render('#vis_select_ul','#item_list_tem2',data);
                })
            }
        ]);
        pro_all(option,back)
    }

    function news_render(el,arr){
        var index = 0;
        setInterval(function(){
            if(index>arr.length-1){
                index=0
            }else{
                $(el).text(arr[index].noticeTitle).attr({'id_':arr[index].noticeId});
                index++;
            }
        },5000)
    }
</script>
</body>
</html>
